// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as lib;

/* ------------------------------------------------------------------------------- */
// hex code colors
// do not reference these directly, use the $m24-color-* variables as they will adapt for dark mode

// black and white
$token-color-black: lib.$color-moz-black-strong;
$token-color-off-black: lib.$color-moz-black;
$token-color-white: lib.$color-moz-white-strong;
$token-color-off-white: lib.$color-moz-white;

// grays
// names seems to have shifted between when these variables were named and final colours were decided on
$token-color-light-gray: lib.$color-moz-white;
$token-color-light-mid-gray: lib.$color-moz-gray-light;
$token-color-mid-gray: lib.$color-moz-gray; // gray 3
$token-color-dark-mid-gray: lib.$color-moz-gray-mid; // gray 4
$token-color-dark-gray: lib.$color-moz-gray-dark; // gray 5

// greens
$token-color-green: lib.$color-moz-green;
$token-color-light-green: lib.$color-moz-green-light;
$token-color-dark-green: lib.$color-moz-green-dark;
$token-color-mid-green: lib.$color-moz-green-mid;

// oranges
$token-color-orange: lib.$color-moz-orange;
$token-color-light-orange: lib.$color-moz-orange-light;
$token-color-dark-orange: lib.$color-moz-orange-dark;
$token-color-red: lib.$color-moz-orange-mid;

// pinks
$token-color-pink: lib.$color-moz-pink;
$token-color-light-pink: lib.$color-moz-pink-light;
$token-color-dark-pink: lib.$color-moz-pink-dark;
$token-color-purple: lib.$color-moz-pink-mid;

/* ------------------------------------------------------------------------------- */
// define sass variables to hold CSS variables
// reference these!

// black and white
$m24-color-black: var(--m24-black);
$m24-color-alt-black: var(--m24-off-black);
$m24-color-white: var(--m24-white);
$m24-color-alt-white: var(--m24-off-white);

// grays
$m24-color-light-gray: var(--m24-light-gray);
$m24-color-light-mid-gray: var(--m24-light-mid-gray) ;
$m24-color-mid-gray: var(--m24-mid-gray) ;
$m24-color-dark-mid-gray: var(--m24-dark-mid-gray) ;
$m24-color-dark-gray: var(--m24-dark-gray);

// greens
$m24-color-green: var(--m24-green);
$m24-color-light-green: var(--m24-light-green);
$m24-color-dark-green: var(--m24-dark-green);
$m24-color-mid-green: var(--m24-mid-green);

// oranges
$m24-color-orange: var(--m24-orange);
$m24-color-light-orange: var(--m24-light-orange);
$m24-color-dark-orange: var(--m24-dark-orange);
$m24-color-red: var(--m24-red);

// pinks
$m24-color-pink: var(--m24-pink);
$m24-color-light-pink: var(--m24-light-pink);
$m24-color-dark-pink: var(--m24-dark-pink);
$m24-color-purple: var(--m24-purple);


/* ------------------------------------------------------------------------------- */
// this mixin will invert the values of the CSS variables, essentially giving you "dark mode"

@mixin invert-colors {
    // black and white
    --m24-white: #{$token-color-black};
    --m24-off-white: #{$token-color-off-black};
    --m24-black: #{$token-color-white};
    --m24-off-black: #{$token-color-off-white};

    // gray
    --m24-light-gray: #{$token-color-dark-gray};
    --m24-dark-gray: #{$token-color-light-gray};
    --m24-light-mid-gray: #{$token-color-dark-mid-gray};
    --m24-dark-mid-gray: #{$token-color-light-mid-gray};

    // green
    --m24-green: #{$token-color-green};
    --m24-light-green: #{$token-color-dark-green};
    --m24-dark-green: #{$token-color-light-green};

    // pink
    --m24-pink: #{$token-color-pink};
    --m24-light-pink: #{$token-color-dark-pink};
    --m24-dark-pink: #{$token-color-light-pink};

    // orange
    --m24-orange: #{$token-color-orange};
    --m24-light-orange: #{$token-color-dark-orange};
    --m24-dark-orange: #{$token-color-light-orange};
}
